
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
  
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/order_question" style="color: #409eff;">问题订单处理</router-link>>
            拦截设置
          </div>
		  
		  <div class="hei10"></div>


        <div
          style="padding-left: 30px;font-size:14px; color:#727272; height:40px; line-height:40px; display: flex;background: #f9f9f9;"
        >退款拦截设置</div>
        <div class="add">
          <el-input placeholder="输入商品名称" v-model="search" style="width:200px"></el-input>
          <el-button type="primary" @click="searchgo" icon="el-icon-search"></el-button>
        </div>
        <div style="text-align:center">
          <el-table
            :data="tableData"
            :header-cell-style="{'border-bottom':'solid 1px #d2d3da','text-align':'center','background-color':'#EEEEEE'}"
            style="width: 100%;text-align:center"
          >
            <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
            <el-table-column prop="sku" label="商品编码" width="180"></el-table-column>
            <el-table-column prop="lanjie" label="拦截设置">
              <template slot-scope="scope">
                <el-checkbox
                  :checked="scope.row.checkedTuiZhong"
                  @change="checked => tuiZhongChange(checked,scope.row.id,scope.row.ID)"
                >退款中拦截</el-checkbox>
                <el-checkbox
                  :checked="scope.row.checkedSuccess"
                  @change="checked => successChange(checked,scope.row.id,scope.row.ID)"
                >退款成功拦截</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="auto" label="自动操作">
              <template slot-scope="scope">
                <el-checkbox
                  :checked="scope.row.checkedTuiSuccessAuto"
                  @change="checked => successAutoChange(checked,scope.row.id,scope.row.ID)"
                >退款成功自动取消订单</el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import top from "@/components/top.vue";
import left from "@/components/left.vue";
import foot from "@/components/foot.vue";
export default {
  components: {
    left: left,
    top: top,
    foot: foot
  },
  name: "lanjie",
  data() {
    return {
      search: "",
      tableData: []
    };
  },
  created() {
    const that = this;
    axios
      .get("/api/gth/order-pages?status=100&_page_size=10000")
      .then(response => {
        console.log(response);
        if (response.data.msg.code == 0) {
          var data = [];
          for (var i = 0; i < response.data.data.data.length; i++) {
            var obj = {};
            obj.ID = i;
            obj.name = response.data.data.data[i].title;
            obj.id = response.data.data.data[i].id;
            obj.sku = response.data.data.data[i].fetch_code;
            if (response.data.data.data[i].is_cancel == 0) {
              obj.checkedTuiSuccessAuto = false;
            } else {
              obj.checkedTuiSuccessAuto = true;
            }
            if (response.data.data.data[i].intercept_range == null ||response.data.data.data[i].intercept_range == '') {
              obj.checkedTuiZhong = false;
              obj.checkedSuccess = false;
            } else {
              if (
                response.data.data.data[i].intercept_range.indexOf(",") >= 0
              ) {
                obj.checkedTuiZhong = true;
                obj.checkedSuccess = true;
              } else {
                if (response.data.data.data[i].intercept_range == 1) {
                  obj.checkedTuiZhong = true;
                  obj.checkedSuccess = false;
                } else {
                  obj.checkedTuiZhong = false;
                  obj.checkedSuccess = true;
                }
              }
            }
            data[i] = obj;
          }
          that.tableData = data;
        }
      });
  },
  mounted() {},
  methods: {
    searchgo: function() {
      const that = this;
      axios
        .get("/api/gth/order-pages?status=100&_page_size=10000&title="+this.search)
        .then(response => {
          console.log(response);
          if (response.data.msg.code == 0) {
            var data = [];
            for (var i = 0; i < response.data.data.data.length; i++) {
              var obj = {};
              obj.ID = i;
              obj.name = response.data.data.data[i].title;
              obj.id = response.data.data.data[i].id;
              obj.sku = response.data.data.data[i].fetch_code;
              if (response.data.data.data[i].is_cancel == 0) {
                obj.checkedTuiSuccessAuto = false;
              } else {
                obj.checkedTuiSuccessAuto = true;
              }
              if (response.data.data.data[i].intercept_range == null) {
                obj.checkedTuiZhong = false;
                obj.checkedSuccess = false;
              } else {
                if (
                  response.data.data.data[i].intercept_range.indexOf(",") >= 0
                ) {
                  obj.checkedTuiZhong = true;
                  obj.checkedSuccess = true;
                } else {
                  if (response.data.data.data[i].intercept_range == 1) {
                    obj.checkedTuiZhong = true;
                    obj.checkedSuccess = false;
                  } else {
                    obj.checkedTuiZhong = false;
                    obj.checkedSuccess = true;
                  }
                }
              }
              data[i] = obj;
            }
            that.tableData = data;
          }else{
            that.$message.error(response.data.msg.info);
          }
        });
    },
    successChange: function(checked, id, ID) {
      const that = this
      console.log(checked);
      console.log("退款成功拦截");
      console.log(id);
      console.log(ID);
      if (checked) {
        this.tableData[ID].checkedSuccess = true;
      } else {
        this.tableData[ID].checkedSuccess = false;
      }
      var arr = "";
      var auto = 0;
      if (
        this.tableData[ID].checkedSuccess &&
        this.tableData[ID].checkedTuiZhong
      ) {
        arr = "1,2";
      } else if (this.tableData[ID].checkedSuccess) {
        arr = "2";
      } else if (this.tableData[ID].checkedTuiZhong) {
        arr = "1";
      } else {
        arr = "";
      }
      if (this.tableData[ID].checkedTuiSuccessAuto) {
        auto = 1;
      } else {
        auto = 0;
      }
      axios
        .post("/api/gth/order-pages/intercept/set", {
          order_pages_id: id,
          intercept_range: arr,
          is_cancel: auto
        })
        .then(response => {
          console.log(response.data);
          if(response.data.msg.code == 0){
            if(response.data.data == 'success'){
              that.$message({
                  message: "修改成功",
                  type: "success"
                });
            }
          }else{
            that.$message.error(response.data.msg.info);
          }
        });
    },
    successAutoChange: function(checked, id, ID) {
      const that = this
      console.log(checked);
      console.log("退款成功自动取消订单");
      console.log(id);
      console.log(ID);
      if (checked) {
        this.tableData[ID].checkedTuiSuccessAuto = true;
      } else {
        this.tableData[ID].checkedTuiSuccessAuto = false;
      }
      var arr = "";
      var auto = 0;
      if (
        this.tableData[ID].checkedSuccess &&
        this.tableData[ID].checkedTuiZhong
      ) {
        arr = "1,2";
      } else if (this.tableData[ID].checkedSuccess) {
        arr = "2";
      } else if (this.tableData[ID].checkedTuiZhong) {
        arr = "1";
      } else {
        arr = "";
      }
      if (this.tableData[ID].checkedTuiSuccessAuto) {
        auto = 1;
      } else {
        auto = 0;
      }
      axios
        .post("/api/gth/order-pages/intercept/set", {
          order_pages_id: id,
          intercept_range: arr,
          is_cancel: auto
        })
        .then(response => {
          console.log(response.data);
          if(response.data.msg.code == 0){
            if(response.data.data == 'success'){
              that.$message({
                  message: "修改成功",
                  type: "success"
                });
            }
          }else{
            that.$message.error(response.data.msg.info);
          }
        });
    },
    tuiZhongChange: function(checked, id, ID) {
      console.log(checked);
      console.log("退款中拦截");
      console.log(id);
      console.log(ID);
      const that = this
      if (checked) {
        this.tableData[ID].checkedTuiZhong = true;
      } else {
        this.tableData[ID].checkedTuiZhong = false;
      }
      var arr = "";
      var auto = 0;
      if (
        this.tableData[ID].checkedSuccess &&
        this.tableData[ID].checkedTuiZhong
      ) {
        arr = "1,2";
      } else if (this.tableData[ID].checkedSuccess) {
        arr = "2";
      } else if (this.tableData[ID].checkedTuiZhong) {
        arr = "1";
      } else {
        arr = "";
      }
      if (this.tableData[ID].checkedTuiSuccessAuto) {
        auto = 1;
      } else {
        auto = 0;
      }
      axios
        .post("/api/gth/order-pages/intercept/set", {
          order_pages_id: id,
          intercept_range: arr,
          is_cancel: auto
        })
        .then(response => {
          console.log(response.data);
          if(response.data.msg.code == 0){
            if(response.data.data == 'success'){
              that.$message({
                  message: "修改成功",
                  type: "success"
                });
            }
          }else{
            that.$message.error(response.data.msg.info);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.bao .el-button--primary {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background-color: #fff !important;
  border: 1px solid #dcdfe6 !important;
  color: #606266 !important;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  margin-left: 10px !important;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  padding: 14px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.colorli {
  display: flex;
  width: 100px;
}
.colorli div {
  flex: 1;
  justify-content: space-between;
  line-height: 34px;
  text-align: center;
}
.tooltip {
  max-width: 300px;
  line-height: 30px;
}
.lanjie {
  margin: 0;
  padding: 0;
  background: #efefef;
  .el-table .cell {
    text-align: center;
  }
  .dz {
    .el-cascader {
      width: 100%;
    }
  }

      .add {
        padding: 20px 30px;
        text-align: left;
        position: relative;
        .input-with-select {
          width: 280px;
        }
        .el-button {
          position: absolute;
          left: 230px;
          top: 20px;
          padding: 10px 20px;
          background-color: #ff5151;
          border-color: #ff5151;
        }
      }
      .title {
        border-bottom: 1px #eaeaea solid;
        line-height: 45px;
        padding-left: 30px;
        font-size: 16px;
        background: #f9f9f9;
        color: #727272;
      }
      .o_ul {
        background: #f9f9f9;
        display: flex;
        .o_li {
          flex-basis: 160px;
          line-height: 45px;
          display: block;
          color: #727272;
          border-top: 3px #f9f9f9 solid;
          font-size: 14px;
          text-align: center;
        }
        .act {
          border-top: 3px #dd2727 solid;
          background: #ffffff;
        }
      }
    }
    .con {
      padding: 20px 0;
      .seebtn {
        cursor: pointer;
        text-align: center;
        color: #197cff;
      }
      .el-dropdown {
        color: #197cff;
        font-size: 14px;
      }
      .w180 {
        .flex {
          /deep/ .el-form-item {
            margin-bottom: 20px;
          }
          /deep/ .el-form-item__label {
            font-size: 14px;
            line-height: 32px !important;
            height: 32px !important;
          }
          /deep/ .el-input {
            line-height: 32px;
            width: 170px;
          }
          /deep/ .el-form-item__content {
            line-height: 32px !important;
            height: 32px !important;
          }
          /deep/ .el-input__inner {
            line-height: 32px !important;
            height: 32px !important;
          }
          /deep/ .el-input__icon {
            line-height: 32px !important;
            height: 32px !important;
          }
        }
      }

      .seedetail {
        color: #197cff;
        cursor: pointer;
      }
      .powertable {
        margin: 0 10px;
      }
      .select {
        /deep/ .el-select {
          margin: 0 10px;
          line-height: 30px;
          width: 150px;
        }
        /deep/ .el-input__inner {
          line-height: 32px !important;
          height: 32px !important;
        }
        /deep/ .el-input__icon {
          line-height: auto;
          line-height: 32px;
        }
      }

      .btmm {
        .el-button {
          padding: 8px 20px;
        }
      }

      .powerlist {
        display: flex;
        line-height: 45px;
        text-align: center;
      }
      .powerth {
        background: #e5e5e5;
        color: #666666;
        font-size: 14px;
        border-right: 1px #eaeaea solid;
      }

      .powerth:nth-child(1) {
        flex-basis: 50px;
      }
      .powertd:nth-child(1) {
        flex-basis: 50px;
      }
      .powerth:nth-child(2) {
        flex-basis: 0px;
        border: 0;
      }
      .powertd:nth-child(2) {
        flex-basis: 0px;
        border: 0;
      }
      .powerth:nth-child(3) {
        flex-basis: 200px;
      }
      .powertd:nth-child(3) {
        flex-basis: 200px;
      }
      .powerth:nth-child(4) {
        flex-basis: 150px;
      }
      .powertd:nth-child(4) {
        flex-basis: 150px;
      }
      .powerth:nth-child(5) {
        flex-basis: 150px;
      }
      .powertd:nth-child(5) {
        flex-basis: 150px;
      }

      .powerth:nth-child(6) {
        flex-basis: 100px;
      }
      .powertd:nth-child(6) {
        flex-basis: 100px;
      }
      .powerth:nth-child(7) {
        flex-basis: 150px;
      }
      .powertd:nth-child(7) {
        flex-basis: 150px;
      }
      .powerth:nth-child(8) {
        flex-basis: 70px;
      }
      .powertd:nth-child(8) {
        flex-basis: 70px;
      }
      .powerth:nth-child(9) {
        flex-basis: 140px;
      }
      .powertd:nth-child(9) {
        flex-basis: 140px;
      }
      .powerth:nth-child(10) {
        flex-basis: 58px;
      }
      .powertd:nth-child(10) {
        flex-basis: 58px;
      }
      .powerth:nth-child(11) {
        flex-basis: 100px;
      }
      .powertd:nth-child(11) {
        flex-basis: 100px;
      }

      .th1 {
        flex-basis: 80px;
        max-width: 80px;
      }
      .powertd {
        background: #ffffff;
        overflow: hidden;
        max-height: 66px;
        color: #888888;
        line-height: 33px;
        font-size: 14px;
        border-bottom: 1px #eaeaea solid;
        border-right: 1px #eaeaea solid;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
      }
      .fenye {
        text-align: right;
        margin: 20px 0;
      }

  .newflex {
    display: flex;
    justify-content: space-between;
  }
  .newsearch {
    display: flex;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
    .act {
      color: #EEF7FF;
      border-bottom: 3px #EEF7FF solid !important;
    }
    .news1 {
      flex-basis: 170px;
      border-bottom: 3px #dcdcdc solid;
      padding: 10px 0;
      cursor: pointer;
    }
    .news2 {
      flex-basis: 170px;
      padding: 10px 0;
      border-bottom: 3px #dcdcdc solid;
      cursor: pointer;
    }
    .news3 {
      flex-basis: 170px;
      padding: 10px 0;
      border-bottom: 3px #dcdcdc solid;
      cursor: pointer;
    }
    .news4 {
      flex-basis: 316px;
      padding: 10px 0;
      border-bottom: 3px #dcdcdc solid;
      cursor: pointer;
    }
  }
  .newlistbor {
    margin-bottom: -1px;
  }
  .newlist {
    .newleft {
      display: flex;
      flex-basis: 1050px;
    }
    .newthli {
      font-size: 14px;
      line-height: 40px;
      height: 40px;
      background: #f9f9f9;
      color: #646464;
    }
    .newthli1 {
      font-size: 14px;
      line-height: 40px;
      height: 40px;
      color: #646464;
    }
    .newthli:nth-child(1) {
      flex-basis: 110px;
      padding-left: 15px;
    }
    .newthli:nth-child(2) {
      flex-basis: 150px;
    }
    .newthli:nth-child(3) {
      flex-basis: 160px;
      color: #2775b6;
    }
    .newthli:nth-child(4) {
      flex-basis: 200px;
    }

    .newthli:nth-child(5) {
      flex-basis: 170px;
      text-align: center;
    }
    .newthli:nth-child(6) {
      flex-basis: 127px;
      text-align: center;
    }
    .newthli:nth-child(7) {
      flex-basis: 110px;
      text-align: center;
    }

    .newright {
      flex-basis: 116px;
      text-align: center;
    }

    .newh {
      display: flex;
      justify-content: space-between;
      background: #f3faff;
      line-height: 48px;
      height: 48px;
      color: #646464;
      font-size: 13px;
      border: 1px #eaeaea solid;
      .newhli {
        margin-right: 10px;
        /deep/ .el-icon-document-copy {
          margin-left: 0 !important;
        }
        img {
          width: 20px;
          position: relative;
          top: 2px;
          cursor: pointer;
        }
      }
      .newhli:nth-child(1) {
        flex-basis: 50px;
        text-align: center;
      }
    }
    .newb {
      display: flex;
      font-size: 14px;
      color: #646464;
      line-height: 25px;
      margin-bottom: 10px;
      border: 1px #eaeaea solid;
      .newt1 {
        flex-basis: 290px;
        padding: 15px;
        border-right: 1px #eaeaea solid;
        box-sizing: border-box;
      }
      .newt2 {
        flex-basis: 340px;
        padding: 15px;
        position: relative;
        border-right: 1px #eaeaea solid;
        box-sizing: border-box;
      }
      .seephoto {
        color: #2775b6;
        cursor: pointer;
      }

      .newt3 {
        flex-basis: 160px;
        padding: 15px;
        overflow: hidden;
        border-right: 1px #eaeaea solid;
        box-sizing: border-box;
      }
      .newt4 {
        flex-basis: 100px;
        padding: 15px;
        padding-right: 20px;
        border-right: 1px #eaeaea solid;
        text-align: center;
        .newcar {
          max-height: 80px;
          overflow: hidden;
        }
        .newcar2 {
          color: #2775b6;
          cursor: pointer;
        }
      }
      .newt5 {
        flex-basis: 100px;
        padding-right: 20px;
        padding: 15px;
        max-width: 100px;
        overflow: hidden;
        border-right: 1px #eaeaea solid;
        box-sizing: border-box;
      }
      .newt6 {
        flex-basis: 118px;
        padding: 15px;
        box-sizing: border-box;
        .contact {
          margin-top: 5px;
          background: #EEF7FF;
          color: #ffffff;
          line-height: 25px;
          text-align: center;
          border-radius: 3px;
          cursor: pointer;
        }
        .contact2 {
          margin-top: 5px;
          color: #666;
          line-height: 25px;
          text-align: center;
          border-radius: 3px;
          cursor: pointer;
        }
      }
    }
  }
  .flex {
    display: flex;
    padding-right: 20px;
  }
  .logflex {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .el-button--primary {
      padding: 10px 30px;
    }
  }
  .logflex div {
    width: 377px;
    text-align: center;
  }
  .logflex .proimg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 265px;
    background: #eaeaea;
  }
  .logflex .proimg img {
    max-width: 100%;
    max-height: 100%;
  }
  .protitle {
    color: #197cff;
    cursor: pointer;
    margin-top: 10px;
  }
  .propipei {
    padding-left: 90px;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .propipei span {
    margin: 0 10px;
    color: #ff5053;
  }
}
</style>
